<template>
	<view class="personal-info-page">
		<view class="up-view">
			<!-- <view class="custom-navbar"> -->
			<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>信息修改</text>
				</view>
				</view> -->
			<!-- </view> -->
			<!-- 标签栏（进行中/已完成） -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<text>{{ tab.name }}</text>
				</view>
			</view>
		</view>
		<view class="order-list-page">
			<!-- 筛选栏（维修方式+预约日期） -->
			<view class="cardUp01">
				<view class="filter-form">
					<!-- 维修方式下拉选择 -->
					<view class="repair-type">
						<text>维修方式:</text>
						<picker mode="selector" :range="repairTypes" @change="(e) => {
				          filterParams.repairType = repairTypes[e.detail.value];
				          fetchData();
				        }">
							<view class="picker-btn">
								{{ filterParams.repairType || '全部' }}
							</view>
						</picker>
					</view>

					<!-- 时间范围选择（点击弹出日期选择框） -->
					<view class="dateRange" @click="toggle('center')">
						<image src="/static/icons/myOrders/日期@2x.png" mode=""></image>
						<text>预约日期</text>
					</view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popup">
						<view class="popup-content">
							<!-- 开始时间选择 -->
							<view class="time-item">
								<text>开始时间</text>
								<uni-datetime-picker type="datetime" v-model="filterParams.startTime"
									:clear="false"></uni-datetime-picker>
							</view>
							<!-- 结束时间选择 -->
							<view class="time-item">
								<text>结束时间</text>
								<uni-datetime-picker type="datetime" v-model="filterParams.endTime"
									:clear="false"></uni-datetime-picker>
							</view>
							<!-- 操作按钮 -->
							<view class="popup-btns">
								<button class="confirm-btn" @click="confirmTime">确认</button>
							</view>
						</view>
					</uni-popup>

				</view>
			</view>



			<!-- 订单列表 -->
			<view class="order-list">
				<view v-for="(order, index) in orders" :key="index" class="order-item">
					<view class="cardUp" @click="goToRepairRecord(order)">
						<view class="orderNo">
							维修单号：
							<text>{{ order.orderNo }}</text>
						</view>
						<view class="repairType">维修方式：
							<text>{{ order.repairType }}</text>
						</view>
						<view class="reserveTime">预约日期：
							<text>{{ order.reserveTime }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<!-- 分页加载提示 -->
				<view class="no-more" v-if="orders.length === 0">暂无数据</view>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
						name: "进行中",
						status: "ongoing"
					},
					{
						name: "已完成",
						status: "completed"
					}
				],
				currentTab: 0, // 默认选中“进行中”
				orders: [], // 订单列表
				selectedRepairType: "全部", // 默认选中“全部”

				repairTypes: ['全部', '到店维修', '上门取车'], // 维修方式选项
				filterParams: {
					repairType: '', // 选中的维修方式
					startTime: '', // 开始时间
					endTime: '' // 结束时间
				},
				isLoading: false, // 是否正在加载
				showDatePicker: false // 日期弹窗显示状态	

			};
		},
		onLoad() {
			this.getOrders();
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 重置时间范围
			resetTime() {
				this.filterParams.startTime = '';
				this.filterParams.endTime = '';
			},
			// 确认时间范围并关闭弹窗
			confirmTime() {
				// 这里可以添加调用接口的逻辑，携带 startTime 和 endTime 参数
				console.log('开始时间：', this.startTime, '结束时间：', this.endTime);
				this.fetchData(); // 选择时间后触发请求
			},
			// 发起请求（携带筛选参数）
			fetchData() {
				// 模拟请求（实际项目中替换为 uni.request 调用后端接口）
				console.log('请求参数：', this.filterParams);
				// 示例：
				// uni.request({
				//   url: '/api/repair/orders',
				//   method: 'GET',
				//   data: this.filterParams,
				//   success: (res) => {
				//     // 处理接口返回的订单数据
				//     this.$emit('fetchSuccess', res.data);
				//   }
				// });
			},

			// 切换标签（进行中/已完成）
			switchTab(index) {
				this.currentTab = index;
				this.getOrders(); // 切换后重新获取订单
			},
			// 维修方式选择器变更
			onRepairTypeChange(e) {
				this.repairTypeIndex = e.detail.value;
				this.selectedRepairType = this.repairTypes[this.repairTypeIndex];
				this.getOrders(); // 筛选后重新获取订单
			},
			// 确认选择的日期
			confirmDate() {
				this.showDatePicker = false;
				this.getOrders(); // 筛选后重新获取订单
			},
			// 获取订单（模拟接口请求）
			getOrders() {
				uni.showLoading({
					title: "加载中..."
				});
				setTimeout(() => {
					uni.hideLoading();
					const tabStatus = this.tabs[this.currentTab].status;
					let mockOrders = [];

					// 模拟“进行中”订单
					if (tabStatus === "ongoing") {
						mockOrders = [{
								id:1,
								orderNo: "3535250",
								status:"进行中",
								repairType: "到店维修",
								reserveTime: "2022/11/10 11:00"
							},
							{
								id:2,
								orderNo: "3535251",
								status:"进行中",
								repairType: "上门取车",
								reserveTime: "2022/11/10 11:00"
							},
							{
								id:3,
								orderNo: "3535252",
								status:"进行中",
								repairType: "到店维修",
								reserveTime: "2022/11/10 11:00"
							}
						];
					}
					// 模拟“已完成”订单
					else if (tabStatus === "completed") {
						mockOrders = [{
								id: 3,
								orderNo: "3535253",
								status: "已完成",
								repairType: "到店维修",
								reserveTime: "2022/11/09 10:00"
							},
							{
								id:3,
								orderNo: "3535254",
								status: "已完成",
								repairType: "上门取车",
								reserveTime: "2022/11/08 09:00"
							}
						];
					}

					// 维修方式筛选
					if (this.selectedRepairType !== "全部") {
						mockOrders = mockOrders.filter(
							(order) => order.repairType === this.selectedRepairType
						);
					}

					// 日期筛选（示例：若选了日期，仅展示该日期订单，需根据实际逻辑调整）
					if (this.startDate && this.endDate) {
						// 这里只是简单示例，实际项目中需根据后端接口要求处理日期格式和筛选逻辑
						mockOrders = mockOrders.filter(
							(order) => {
								const orderDate = new Date(order.reserveTime.split(" ")[0]);
								const start = new Date(this.startDate);
								const end = new Date(this.endDate);
								return orderDate >= start && orderDate <= end;
							}
						);
					}

					this.orders = mockOrders;
				}, 1000);
			},
			// 前往维修记录详情页
			goToRepairRecord(order) {
				uni.navigateTo({
					url: `/my/pages/orderRepairDetail/orderRepairDetail?id=${order.id}`
				});
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 200rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}




	.order-list-page {
		height: 100vh;
		padding: 0 20rpx;
		margin-top: -200rpx;
	}

	/* 顶部标签栏（背景蓝色，文字白色） */
	.tab-bar {
		display: flex;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
		margin: 10rpx 100rpx;
		font-size: 31rpx;
		color: #fff;
		/* 文字白色 */
	}

	.tab-item.active {
		font-weight: bold;
		border-bottom: 4rpx solid #fff;
		/* 选中时下划线白色 */
	}

	.order-list {
		margin-top: 20rpx;
	}

	.order-item {
		margin-bottom: 20rpx;
	}



	.cardUp,
	.cardUp01 {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.cardUp {
		padding: 10rpx 30rpx;
	}

	.cardUp01 {
		display: flex;
		justify-content: space-between;
	}

	.filter-form {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		padding: 10rpx 10rpx;
		background-color: #fff;
	}

	.repair-type {
		display: flex;
		align-items: center;
	}

	.repair-type text {
		margin-right: 10rpx;
	}

	.picker-btn {
		display: flex;
		align-items: center;
		background-color: #267AF6;
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border: 1rpx solid #eee;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}

	.button {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	::v-deep .uni-popup__wrapper {
		border-radius: 50rpx;
	}

	.dateRange {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.dateRange image {
		width: 40rpx;
		height: 35rpx;
		margin-top: 3rpx;
		margin-right: 20rpx
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		padding: 40rpx 40rpx;
		width: 80vw;
		border-radius: 50rpx;
		background-color: #fff;
	}

	.popup-btns {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.popup-btns button {
		margin-left: 10rpx;
	}

	.orderNo,
	.repairType,
	.reserveTime {
		font-size: 30rpx;
		margin: 30rpx 0;
		font-weight: bold;
	}


	.orderNo>text,
	.repairType>text,
	.reserveTime>text {
		color: #868686;
		font-weight: 400;
	}

	.foot {
		margin-top: 400rpx;
	}

	.loading,
	.no-more {
		text-align: center;
		padding: 20rpx;
		color: #000;
	}



	.time-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.time-item text {
		width: 120rpx;
		margin-right: 40rpx;
		font-size: 28rpx;
	}

	.confirm-btn {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-right: 0rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff;
	}
</style>